<template>
  <div>
    <el-button type="primary" size="small" @click="uploadFile"> 资源上传 </el-button>
    <!-- 文件列表 -->
    <transition-group v-if="show" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear"
      tag="ul">
      <li :key="index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
        <el-link :href="`${file.url}`" :underline="false" target="_blank">
          <span class="el-icon-document"> {{ file.name }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
        </div>
      </li>
    </transition-group>
    <el-dialog title="资源上传" :visible.sync="visible" width="50%" append-to-body>
      <upload v-bind="$attrs" @uploadFileList="uploadFileList"></upload>
      <div style="margin: 28px 0 10px 0;">已上传完成附件</div>
      <el-table :data="fileList">
        <el-table-column label="文件名称" align="center" prop="name" />
        <el-table-column label="文件大小" align="center" prop="size" />
        <el-table-column label="状态" align="center" prop="status" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import upload from './index.vue'
  import {
    delOss
  } from "@/api/system/oss";
  export default {
    components: {
      upload
    },
    data() {
      return {
        visible: false,
        fileList: [],
        show: false
      }
    },
    methods: {
      //打开上传弹窗
      uploadFile() {
        this.visible = true
      },
      submitForm() {
        this.show = true
      },
      cancel() {
        this.visible = false
        this.show = false
      },
      uploadFileList(data) {
        // this.fileList = data
        this.fileList.push({
          name: '文件名',
          size: '100MB',
          status: 'success',
          url: 'https://www.baidu.com',
          ossId: '31313'
        })
      },
      // 删除文件
      handleDelete(index) {
        delOss(this.fileList[index].ossId);
        this.fileList.splice(index, 1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
  }

  .upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
  }

  .ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
  }
</style>